﻿<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../../../assets/docs.css" rel="stylesheet" type="text/css" media="screen" />
<title>MooTools Documentation - Interface/Spinner</title>
</head>

<body>
  <div class="doc">
    <div class="methods">
			<h4 class="menu-item"><a href="#Spinner">Spinner</a></h4>
			<div class="menu-item"><a href="#"></a></div>
			<div class="menu-item"><a href="#Spinner:toggle">toggle</a></div>
			<div class="menu-item"><a href="#Spinner:show">show</a></div>
			<div class="menu-item"><a href="#Spinner:hide">hide</a></div>
			<div class="menu-item"><a href="#Spinner:destroy">destroy</a></div>
			<div class="menu-item"><a href="#Spinner:position">position</a></div>
			<div class="menu-item"><a href="#Spinner:resize">resize</a></div>
			<h4 class="menu-item"><a href="#Request">Request</a></h4>
			<div class="menu-item"><a href="#Request:getSpinner">getSpinner</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element-Properties:spinner">spinner</a></div>
			<h4 class="menu-item"><a href="#Element">Element</a></h4>
			<div class="menu-item"><a href="#Element:spin">spin</a></div>
			<div class="menu-item"><a href="#Element:unspin">unspin</a></div>
    </div>
    <div class="l-border r-border span-15 content">
				<h1 id="Spinner"><a href="#Spinner">Class: Spinner</a></h1>

<p class="description">Adds a semi-transparent overlay over a DOM element with a 'spinning' ajax icon.</p>

<h3>Extends</h3>

<ul>
<li><a href="Mask.html">Mask</a></li>
</ul>
<h3>Implements</h3>

<ul>
<li>
<a href="../../core/Class/Class.Extras.html#Options">Options</a>, <a href="../../core/Class/Class.Extras.html#Events">Events</a>, <a href="../../core/Class/Class.Extras.html#Chain">Chain</a>
</li>
</ul>
<h2><a href="#">Spinner Method: constructor</a></h2>

<h3 class="description">Syntax</h3>

<pre class="javascript"><span class="kw2">new</span> Spinner<span class="br0">(</span>target<span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>target - (<em>mixed</em>) A string of the id for an Element or an Element reference to overlay; defaults to <em>document.body</em>
</li>
<li>options - (<em>object</em>) a key/value set of options</li>
</ol>
<h3>Options</h3>

<ul>
<li>all of <a href="Mask.html">Mask</a> options PLUS:</li>
<li>message - (<em>mixed</em>, optional) message placed above the spinner image (as in "Please wait..."). Can be a <em>string</em> or an <em>element</em>.</li>
<li>class - (<em>string</em>) css class name to apply to the spinner container.</li>
<li>containerPosition - (<em>object</em>) options passed to <a href="../Element/Element.Position.html#Element:position">Element:position</a> for the container of the message; relativeTo is set to the target in the arguments automatically (but can be overwritten).</li>
<li>content - (<em>object</em>) properties for the element that contains the spinning image and the message. Defaults only to "class:spinner-content".</li>
<li>img - (<em>object</em> or <em>false</em>) properties for the image element (note: not an img tag - a div); if set to <em>false</em> no image will be injected. Defaults to "class:spinner-img".</li>
<li>fxOptions - (<em>object</em>) options passed to the effects used to transition the overlay and the image opacity.</li>
</ul>
<h3>Styles</h3>

<p>You can style the layer and its contents by just defining a css style for the class names specified in the options class name (these default to ".spinner", ".spinner-content", and ".spinner-img"). You can download the default styles and spinner image here: <a href="http://github.com/mootools/mootools-more/raw/master/Styles/Interface/Spinner/spinner.css">spinner.css</a>, <a href="http://github.com/mootools/mootools-more/raw/master/Styles/Interface/Spinner/spinner.gif">spinner.gif</a>. Without any styles nothing will show up, except for any optional message you may have passed.</p>

<h3>Events</h3>

<ul>
<li>show - (<em>function</em>) callback to execute when the spinning layer is shown; passed the target element to which the <a href="#Spinner">Spinner</a> was attached</li>
<li>hide - (<em>function</em>) callback to execute when the spinning layer is hidden; passed the target element to which the <a href="#Spinner">Spinner</a> was attached</li>
</ul>
<h3>Example</h3>

<pre class="javascript">&lt;div id=<span class="st0">"myElement"</span>&gt;...&lt;/div&gt;
&nbsp;
<span class="kw2">new</span> Spinner<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>;
</pre>

<h2 id="Spinner:toggle"><a href="#Spinner:toggle">Spinner Method: toggle</a></h2>

<p class="description">Toggles the <a href="#Spinner">Spinner</a> visibility. If the <a href="#Spinner">Spinner</a> is currently visible, it will hide. Otherwise it will display.</p>

<h3>Syntax</h3>

<pre class="javascript">mySpinner.<span class="me1">toggle</span><span class="br0">(</span>element<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>element - (<em>mixed</em>, optional) A string of the id for an Element or an Element reference to overlay; defaults to the target passed in at initialization, but you can specify a different element if you wish to reuse the class.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of <a href="#Spinner">Spinner</a>
</li>
</ul>
<h2 id="Spinner:show"><a href="#Spinner:show">Spinner Method: show</a></h2>

<p class="description">Displays the <a href="#Spinner">Spinner</a> layer.</p>

<h3>Syntax</h3>

<pre class="javascript">mySpinner.<span class="me1">show</span><span class="br0">(</span>noFx<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>noFx - (<em>boolean</em>) if <em>true</em> the spinner will not use effects to display but will show immediately (defaults to <em>false</em>).</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of <a href="#Spinner">Spinner</a>
</li>
</ul>
<h2 id="Spinner:hide"><a href="#Spinner:hide">Spinner Method: hide</a></h2>

<p class="description">Hides the <a href="#Spinner">Spinner</a> layer.</p>

<h3>Syntax</h3>

<pre class="javascript">mySpinner.<span class="me1">hide</span><span class="br0">(</span>noFx<span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ol>
<li>noFx - (<em>boolean</em>) if <em>true</em> the spinner will not use effects to hide but will hide immediately (defaults to <em>false</em>).</li>
</ol>
<h2 id="Spinner:destroy"><a href="#Spinner:destroy">Spinner Method: destroy</a></h2>

<p class="description">Destroys the <a href="#Spinner">Spinner</a> spinner layer and its contents. This renders the instance of this class inert (and further calls to its methods will throw errors).</p>

<h3>Syntax</h3>

<pre class="javascript">mySpinner.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span>
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of <a href="#Spinner">Spinner</a>
</li>
</ul>
<h2 id="Spinner:position"><a href="#Spinner:position">Spinner Method: position</a></h2>

<p class="description">Reasserts the position of the spinner layer and its contents.</p>

<h3>Syntax</h3>

<pre class="javascript">mySpinner.<span class="me1">position</span><span class="br0">(</span><span class="br0">)</span>
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of <a href="#Spinner">Spinner</a>
</li>
</ul>
<h2 id="Spinner:resize"><a href="#Spinner:resize">Spinner Method: resize</a></h2>

<p class="description">Reasserts the dimensions of the overlay layer. Note that this method is called when [Spinner.position][] is called, so you needn't call it if you call position.</p>

<h3>Syntax</h3>

<pre class="javascript">mySpinner.<span class="me1">destroy</span><span class="br0">(</span><span class="br0">)</span>
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of <a href="#Spinner">Spinner</a>
</li>
</ul>
<h1 id="Request"><a href="#Request">Class: Request</a></h1>

<p class="description">Extends <a href="../../core/Request/Request.html">Request</a> to add integrated <a href="#Spinner">Spinner</a> functionality.</p>

<h3>Extends</h3>

<ul>
<li><a href="../../core/Request/Request.html">Request</a></li>
</ul>
<h3>Syntax</h3>

<pre class="javascript"><span class="kw2">new</span> Request<span class="br0">(</span>options<span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ul>
<li>options - (<em>object</em>) an object with key/value options</li>
</ul>
<h3>Options</h3>

<ul>
<li>all of <a href="../../core/Request/Request.html">Request</a> options PLUS:</li>
<li>useSpinner - (<em>boolean</em>) use the <a href="#Spinner">Spinner</a> class with this request</li>
<li>spinnerOptions - (<em>object</em>) the options object for the <a href="#Spinner">Spinner</a> class</li>
<li>spinnerTarget - (<em>mixed</em>) a string of the id for an Element or an Element reference to use instead of the one specifed in the <em>update</em> option. This is useful if you want to overlay a different area (or, say, the parent of the one being updated).</li>
</ul>
<h3>Example</h3>

<pre class="javascript"><span class="kw2">new</span> Request<span class="br0">(</span><span class="br0">{</span>
    url: <span class="st0">'/myHtmlFragment.html'</span>,
    update: $<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>,
    useSpinner: <span class="kw2">true</span>,
    spinnerOptions: <span class="br0">{</span>...<span class="me1">etc</span>...<span class="br0">}</span>
<span class="br0">}</span><span class="br0">)</span>;
</pre>

<h3>Notes</h3>

<ul>
<li>When you execute <em>Request.send</em> the <a href="#Spinner">Spinner</a> class will automatically overlay the area on the page that's going to get updated with the new content and when this area is updated the <a href="#Spinner">Spinner</a> hides itself.</li>
</ul>
<h2 id="Request:getSpinner"><a href="#Request:getSpinner">Request Method: getSpinner</a></h2>

<p class="description">Retrieves the "build-in" instance of <a href="#Spinner">Spinner</a>.</p>

<h3>Syntax</h3>

<pre class="javascript">myRequest.<span class="me1">getSpinner</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>object</em>) This instance of <a href="#Spinner">Spinner</a>
</li>
</ul>
<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Extends the Element Type with <a href="#Spinner">Spinner</a> methods.</p>

<h2 id="Element-Properties:spinner"><a href="#Element-Properties:spinner">Element Property: spinner</a></h2>

<h3 class="description">Setter</h3>

<p>Sets a default <a href="#Spinner">Spinner</a> instance for an Element.</p>

<h4>Syntax</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'spinner'</span><span class="br0">[</span>, options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h4>Arguments</h4>

<ol>
<li>options - (<em>object</em>, optional) The <a href="#Spinner">Spinner</a> options.</li>
</ol>
<h4>Returns</h4>

<ul>
<li>(<em>element</em>) This Element.</li>
</ul>
<h4>Examples</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'spinner'</span>, <span class="br0">{</span>message: <span class="st0">'one moment...'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">spin</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//obscure the element with the spinner</span>
el.<span class="me1">unspin</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//hide the spinner</span>
</pre>

<h3>Getter</h3>

<p>Gets the default <a href="#Spinner">Spinner</a> instance for the Element.</p>

<h4>Syntax</h4>

<pre class="javascript">el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'spinner'</span><span class="br0">)</span>;
</pre>

<h4>Arguments</h4>

<ol>
<li>name - (<em>string</em>) This should always be 'spinner'.</li>
</ol>
<h4>Returns</h4>

<ul>
<li>(<em>object</em>) The Element's internal <a href="#Spinner">Spinner</a> instance.</li>
</ul>
<h4>Examples</h4>

<pre class="javascript">el.<span class="me1">set</span><span class="br0">(</span><span class="st0">'spinner'</span>, <span class="br0">{</span>message: <span class="st0">'one moment...'</span><span class="br0">}</span><span class="br0">)</span>;
el.<span class="me1">spin</span><span class="br0">(</span><span class="br0">)</span>; <span class="co1">//show the spinner</span>
el.<span class="me1">get</span><span class="br0">(</span><span class="st0">'spinner'</span><span class="br0">)</span>; <span class="co1">//The Spinner instance.</span>
</pre>

<h1 id="Element"><a href="#Element">Type: Element</a></h1>

<p class="description">Adds <a href="#Spinner">Spinner</a> shortcuts to the <a href="../../core/Element/Element.html">Element</a> class.</p>

<h2 id="Element:spin"><a href="#Element:spin">Element Method: spin</a></h2>

<p class="description">Retrieves the "build-in" instance of <a href="#Spinner">Spinner</a> and calls its <em>mask</em> method.</p>

<h3>Syntax</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">spin</span><span class="br0">(</span><span class="br0">[</span>options<span class="br0">]</span><span class="br0">)</span>;
</pre>

<h3>Arguments</h3>

<ol>
<li>options - (<em>object</em> - optional) the options for the default spinner.</li>
</ol>
<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element</li>
</ul>
<h2 id="Element:unspin"><a href="#Element:unspin">Element Method: unspin</a></h2>

<p class="description">Retrieves the "build-in"  instance of <a href="#Spinner">Spinner</a> and calls its <em>hide</em> method.</p>

<h3>Syntax</h3>

<pre class="javascript">$<span class="br0">(</span><span class="st0">'myElement'</span><span class="br0">)</span>.<span class="me1">unspin</span><span class="br0">(</span><span class="br0">)</span>;
</pre>

<h3>Returns</h3>

<ul>
<li>(<em>element</em>) This Element</li>
</ul>
    </div>
  </div>
<script type="text/javascript" src="../../../assets/mootools-core-1.3.js"></script>
<script type="text/javascript" src="../../../assets/mootools-more-smoothscroll.js"></script>
<script type="text/javascript" src="../../../assets/doc-assist.js"></script>
</body>
</html>
